<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div th:fragment="bootstrap" >
    <link rel="icon" href="../img/favicon.ico">
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}">
    <script th:src="@{/webjars/jquery/3.4.1/jquery.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
</div>

<div th:fragment="StudentNav">
    <style>
        body {
            padding-top: 70px;
            background-color: #f8f9fa;
            font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
        }
        
        /* 学生导航栏样式 */
        .navbar-student {
            background-color: #3498db;
            border: none;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 5px 0;
            min-height: 60px;
        }
        
        .navbar-student .navbar-brand {
            color: white;
            font-size: 22px;
            font-weight: 600;
            height: 60px;
            line-height: 30px;
            padding: 15px;
        }
        
        .navbar-student .navbar-brand:hover,
        .navbar-student .navbar-brand:focus {
            color: #ecf0f1;
        }
        
        .navbar-student .navbar-nav > li > a {
            color: #ecf0f1;
            font-size: 15px;
            padding: 20px 15px;
            transition: all 0.2s ease;
        }
        
        .navbar-student .navbar-nav > li > a:hover,
        .navbar-student .navbar-nav > li > a:focus {
            color: #fff;
            background-color: #2980b9;
        }
        
        .navbar-student .navbar-nav > .active > a,
        .navbar-student .navbar-nav > .active > a:hover,
        .navbar-student .navbar-nav > .active > a:focus {
            color: #fff;
            background-color: #2980b9;
            font-weight: 500;
        }
        
        .navbar-student .navbar-toggle {
            border-color: #2980b9;
        }
        
        .navbar-student .navbar-toggle:hover,
        .navbar-student .navbar-toggle:focus {
            background-color: #2980b9;
        }
        
        .navbar-student .navbar-toggle .icon-bar {
            background-color: #ecf0f1;
        }
        
        .navbar-student .navbar-collapse {
            border-color: #2980b9;
        }
        
        /* 用户信息区域 */
        .user-info {
            padding: 15px;
            color: #fff;
            font-weight: 500;
        }
        
        .logout-btn {
            cursor: pointer;
        }
        
        /* 按钮和标签样式 */
        .btn-student {
            background-color: #3498db;
            border-color: #2980b9;
            color: white;
            transition: all 0.2s ease;
        }
        
        .btn-student:hover,
        .btn-student:focus,
        .btn-student:active {
            background-color: #2980b9;
            border-color: #2980b9;
            color: white;
        }
        
        .label-student {
            background-color: #3498db;
        }
        
        /* 内容容器 */
        .container-student {
            margin-top: 20px;
            margin-bottom: 30px;
        }
        
        /* 卡片样式 */
        .panel-student {
            border-color: #bdc3c7;
            border-radius: 5px;
            box-shadow: 0 1px 5px rgba(0,0,0,0.05);
        }
        
        .panel-student > .panel-heading {
            background-color: #3498db;
            border-color: #3498db;
            color: white;
            font-weight: 600;
        }
        
        /* 特殊效果 */
        .nav-icon {
            margin-right: 6px;
        }
        
        @media (max-width: 767px) {
            .navbar-student .navbar-nav .open .dropdown-menu > li > a {
                color: #ecf0f1;
            }
            
            .navbar-student .navbar-nav .open .dropdown-menu > li > a:hover,
            .navbar-student .navbar-nav .open .dropdown-menu > li > a:focus {
                color: #fff;
                background-color: #2980b9;
            }
        }
    </style>
    
    <nav class="navbar navbar-student navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#student-navbar" aria-expanded="false">
                    <span class="sr-only">切换导航</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" th:href="@{/StuMan}">
                    <i class="glyphicon glyphicon-education nav-icon"></i>在线考试系统
                </a>
            </div>
            
            <div class="collapse navbar-collapse" id="student-navbar">
                <ul class="nav navbar-nav">
                    <li>
                        <a th:href="@{/examList}">
                            <i class="glyphicon glyphicon-list-alt nav-icon"></i>考试中心
                        </a>
                    </li>
                    <li>
                        <a th:href="@{/findAllStuPaper}">
                            <i class="glyphicon glyphicon-time nav-icon"></i>考试历史
                        </a>
                    </li>
                    <li>
                        <a th:href="@{/changePassword}">
                            <i class="glyphicon glyphicon-lock nav-icon"></i>修改密码
                        </a>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="#" class="user-info">
                            <i class="glyphicon glyphicon-user nav-icon"></i>
                            <span th:text="${session.lis.getTruename()}"></span> (学生)
                        </a>
                    </li>
                    <li>
                        <a class="logout-btn" onclick="loginOut()">
                            <i class="glyphicon glyphicon-log-out nav-icon"></i>退出系统
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <script>
        function loginOut() {
            if(confirm('确定要退出系统吗?')){
                location.replace("./logout");
            }
        }
        
        $(document).ready(function() {
            // 根据当前URL设置活动菜单项
            var path = window.location.pathname;
            $('.navbar-nav li a').each(function() {
                var href = $(this).attr('href');
                if (href && path.indexOf(href.substring(href.lastIndexOf('/') + 1)) >= 0) {
                    $(this).parent().addClass('active');
                }
            });
        });
    </script>
</div>

</body>
</html>